<template>  
  <div class="bg">  
    <goback></goback> <!-- 假设goback是一个返回按钮组件 -->  
    <div class="success-container">  
      <img class="success-image" :src="require(`@/assets/icons/成功.png`)" alt="Success" />  
      <p class="success-text">操作成功</p>  
      <p class="countdown-text">{{ countdown }}秒后即将自动跳转至首页</p>  
	  <div class="now_return">立即返回</div>
    </div>  
  </div>  
</template>  
  
<script>  
export default {  
  name: "success",
  data() {  
    return {  
      countdown: 3 // 初始倒计时  
    };  
  },  
  mounted() {  
    let countdownInterval = setInterval(() => {  
      if (this.countdown > 0) {  
        this.countdown--;  
      } else {  
        clearInterval(countdownInterval);  
        this.$router.push({ name: 'index' }); // 假设首页的路由名是index  
      }  
    }, 1000); // 每秒更新一次倒计时  
  },  
  beforeDestroy() {  
    // 在组件销毁前清除倒计时定时器  
    clearInterval(this.countdownInterval);  
  },  
  methods: {  
    // 如果需要手动跳转首页，可以添加此方法  
		goback(){
			this.$router.push({ name: 'index' });
		}
  }  
};  
</script>  
  
<style scoped>  

.success-container {
  width:100vw;
  margin-top:30vh;
  text-align: center;  
}  
  
.success-image {  
  width: 200px; /* 图片宽度，根据需要调整 */  
  height: auto;  
  margin-bottom: 20px; /* 图片与下方文本的距离，根据需要调整 */  
}  
  
.success-text {  
  font-size: 24px; /* 文本大小，根据需要调整 */  
  color: #333; /* 文本颜色，根据需要调整 */  
  margin-bottom: 10px; /* 文本与下方倒计时的距离，根据需要调整 */  
}  
  
.countdown-text {  
  font-size: 18px; /* 倒计时文本大小，根据需要调整 */  
  color: #666; /* 倒计时文本颜色，根据需要调整 */  
}
.now_return{
	display: block;
	width: 25vw;
	margin:0 auto;
	margin-top: 24px;
	background-color: #ebebeb;
	border-radius: 40px;
	padding: 10px;
}
</style>